<template>
    <div id="login">
        <el-form :model="numberValidateForm" ref="numberValidateForm"  class="demo-ruleForm">
            <div id="avatar">
                <el-avatar shape="square" :size="150" fit="fill" :src="require('@/assets/shark.png')"></el-avatar>
            </div>
            <el-form-item
                label="用户名"
                prop="username"
                :rules="[
                    { required: true, message: '姓名不能为空'},
                ]">
                <el-input v-model.number="numberValidateForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                label="密码"
                prop="password"
                :rules="[
                    { required: true, message: '密码不能为空'},
                ]">
                <el-input type="password" v-model.number="numberValidateForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
                <el-button @click="resetForm('numberValidateForm')">重置</el-button>
            </el-form-item>
            </el-form>
    </div>
</template>

<script>
import md5 from 'md5'
export default {
    data() {
        return {
          id: 1,
          numberValidateForm: {
              username: 'admin',
              password: 'admin'
          }
        }
    },
    mounted() {
      // 登录成功
      this.$EventBus.$on('ID' + 257, (authenticatorResponse) => {
          authenticatorResponse.user.token = authenticatorResponse.token;
        this.$store.commit('setUser', authenticatorResponse.user);
        localStorage.setItem('user', JSON.stringify(authenticatorResponse.user));
        this.$router.push('/chat')
      })
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let obj = {}
            obj.id = 1
            obj.username = this.numberValidateForm.username
            obj.password = md5(this.numberValidateForm.password)
            this.$EventBus.$emit('Send', obj)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style lang="stylus" scoped>
#login
  display: flex
  border-radius 10px
  margin: 200px auto
  width: 450px
  height: 500px
  background-color: #fff
  .el-form
    margin: auto
  #avatar
    margin: 30px
.el-avatar
  background #ffffff !important
</style>
